<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: 哎嘿
  Date: 2022/10/31
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>List</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
</head>
<body>
<div>欢迎:${loginUser.realName}</div>

<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="realName" id="realName" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-block">
                    <select name="roleId" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1">管理系统员</option>
                        <option value="2">店长</option>
                        <option value="3">店员</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
            </div>
        </script>
        <div>
            <span id="account"></span><br>
            <span id="password"></span><br>
            <span id="realName1"></span><br>
            <span id="roleId"></span><br>
            <span id="phone"></span><br>
            <span id="address"></span><br>
            <span id="sex"></span><br>
            <span id="birthday"><fmt:formatDate value="${sysUser.birthday}" pattern="yyyy-MM-dd"/> </span><br>
            <span><img src="" id="idPic" width="100" height="120"></span>
        </div>
        <div>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view2">查看2</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </form>
</div>


<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var tableIns = table.render({
            elem: '#test'
            , url: 'userList'
            , toolbar: '#toolbarDemo'
            , cols: [[
                {field: 'id', width: 180, title: '编号'}
                , {field: 'account', width: 180, title: '账号'}
                , {field: 'realName', width: 180, title: '真实姓名'}
                , {field: 'roleId', width: 180, title: '角色'}
                , {field: 'sex', title: '性别', Width: 80}
                , {field: 'age', width: 100, title: '年龄'}
                , {field: 'phone', width: 180, title: '电话'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
            ]]
            , page: true
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    , roleId: data.field.roleId
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });


        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    window.open('addTo')
                    break;
            }
        });

        //监听工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.get("delete/" + data.id, function (data2) {
                        if (data2 === "1") {
                            // alert('删除成功')
                            // location.href="http://localhost:8080/mvc_master_war_exploded/user/toList";
                            location.reload();
                        } else {
                            alert('删除失败')
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'view') {
                window.open("view/" + data.id)
            } else if (obj.event === 'edit') {
                window.open("toupdate/" + data.id)
            } else if (obj.event == 'view2') {
                $.get("${pageContext.request.contextPath}/user/view2" + data.id, function (data) {
                    if (data != null) {
                        $("#account").html("账号:"+data.account)
                        $("#password").html("密码:"+data.password)
                        $("#realName1").html("真实姓名:"+data.realName)
                        $("#roleId").html("角色:"+data.roleId)
                        $("#phone").html("电话:"+data.phone)
                        $("#address").html("地址:"+data.address)
                        if (data.sex == 2) {
                            $("#sex").html("性别:"+"女")
                        } else {
                            $("#sex").html("性别:"+"男")
                        }
                        $("#birthday").html("出生日期:"+data.birthday)
                       $("#idPic").attr('src',"${pageContext.request.contextPath}/static/upload/"+data.idPicPath)
                    }
                })
            }
        });
    });
</script>

</body>
</html>
